<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/Reset.css">
    <link rel="stylesheet" href="./css/Public.css">
    <style>
    #search {
        background-color: #fff;
        border-bottom: 1px solid #b0b0b0;
        width: 100%;
        position: relative;
    }
    #search .searchbox {
        padding: 10px;
    }
    #search .searchbox > input {
        height: 30px;
        width: 90%;
        padding-left: 5%;
        border-radius: 15px;
        background-color: #f1f1f1;
        border: none;
        font-size: 16px;
    }
    #search .button > button {
        width: 63px;
        height: 30px;
        background: #1d6dff;
        border-radius: 15px;
        position: absolute;
        right: 10px;
        top: 10px;
        border: none;
    }
    #search .button > button::before {
        content: '搜索';
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        border: none;
        color: #fff;
    }
    .container {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }
    .row {
        margin-right: -15px;
        margin-left: -15px;
    }
    #nav{
        display: inline-block;
    }
    #nav > .container > .row div {
        float: left;
        width: 25%;
        height: 100px;
        text-align: center;
        padding: 10px;
    }
    #nav > .container > .row div > a > span > img {
        height: 50px;
        vertical-align: middle;
        border: 0;
        
    }
    #nav > .container > .row div p {
        margin-top: 5px;
        font-size: 13px;
        height: 19px;
    } 
    #discount {
        background-color: #1d6dff;
        height: 35px;
        line-height: 35px;
        padding-left: 10px;
    }
    #discount span {
        text-align: left;
        font-size: 20px;
        color: #fff;
        font-weight: bolder;
    }
    #discount img {
        text-align: right;
        height: 20px;
        margin-top: 7px;
        margin-right: 10px;
    }
    #product ul {
        margin-top: 0;
        margin-bottom: 10px;
    }
    #product li {
        padding: 10px 8px;
        height: 130px;
        display: list-item;
    }
    #product li a {
        display: block;
        color: #666;
        text-decoration: none;
        background-color: transparent;
    }
    #product li .clearfix{
        height: 100px;
    }
    #product li a .fl{
        float: left;
    }
    #product li a .img img {
        height: 100px;
        padding-right: 10px;
    }
    #product li a .infoR{
        height: 57px;
        padding-left: 90px;
        display: block;
    }
    #product li a .infoR > .title {
        display: block;
        height: 57px;
    }
    #product li a .infoR > .title h4 {
        color: #333333;
        word-break: break-all;
        font-size: 15px;
        line-height: 19px;
        min-height: 57px;
        text-align: left;
        font-weight: normal;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    #product li a .infoR > .title h4 > span {
        color: #ff6c00;
    }
    #product li a .infoR .other{
        display: block;
    }
    #product li a .infoR .other .fl{
        float: left;
    }
    #product li a .infoR em {
        font-style: normal;
    }
    #product li a .infoR em .fr{
        float: right;
    }
    </style>
</head>
<body>
    <!--头部-->
    <header id="header">
        <div class="fl logo">
            <a href="">
                <img src="./assets/images/logo.png" alt="">
            </a>
        </div>
        <div class="app fr">
            <a href="">
                <img src="./assets/images/app.png" alt="">
            </a>
        </div>
    </header>
    <!--搜索-->
    <section id="search">
        <div class="searchbox">
            <input type="text" name="" placeholder="请输入你想比价的产品">
        </div>
        <div class="button">
            <button></button>
        </div>
    </section>
    <!--菜单-->
    <nav id="nav">
        <div class="container">
            <div class="row" id="info">
                <div class="col-xs-3">
                    <a href="./pages/Comparable.html">
                    <span>
                    <img src="./assets/images/ic_search.png" alt="比价搜索">
                    </span>
                    </a>
                    <p class="in_name">比价搜索</p>
                </div>
                <div class="col-xs-3">
                    <a href="#">
                    <span>
                    <img src="./assets/images/ic_cu.png" alt="省钱控">
                    </span>
                    </a>
                    <p class="in_name">省钱控</p>
                </div>
                <div class="col-xs-3">
                    <a href="#">
                    <span>
                    <img src="./assets/images/ic_coudanpin.png" alt="国内折扣">
                    </span>
                    </a>
                    <p class="in_name">国内折扣</p>
                </div>
                <div class="col-xs-3">
                    <a href="#">
                    <span>
                    <img src="./assets/images/ic_bcj.png" alt="白菜价">
                    </span>
                    </a>
                    <p class="in_name">白菜价</p>
                </div>
                <div class="col-xs-3">
                    <a href="#">
                    <span>
                    <img src="./assets/images/haitao.png" alt="海淘折扣">
                    </span>
                    </a>
                    <p class="in_name">海淘折扣</p>
                </div>
                <div class="col-xs-3">
                    <a href="#">
                    <span>
                    <img src="./assets/images/ic_temai.png" alt="优惠劵">
                    </span>
                    </a>
                    <p class="in_name">优惠劵</p>
                </div>
                <div class="col-xs-3">
                    <a href="#">
                    <span>
                    <img src="./assets/images/ic_trend.png" alt="查价历史">
                    </span>
                    </a>
                    <p class="in_name">查价历史</p>
                </div>
                <div class="col-xs-3">
                    <a href="#">
                    <span>
                    <img src="./assets/images/gengduo.png" alt="更多">
                    </span>
                    </a>
                    <p class="in_name">更多</p>
                </div>
                <div class="col-xs-3" display="block">
                    <a href="#">
                    <span>
                    <img src="./assets/images/ic_coudanpin.png" alt="凑单品">
                    </span>
                    </a>
                    <p class="in_name">凑单品</p>
                </div>
                <div class="col-xs-3" display="block">
                    <a href="#">
                    <span>
                    <img src="./assets/images/ic_kb.png" alt="口碑排行">
                    </span>
                    </a>
                    <p class="in_name">口碑排行</p>
                </div>
                <div class="col-xs-3" display="block">
                    <a href="#">
                    <span>
                    <img src="./assets/images/ic_mall.png" alt="商城导航">
                    </span>
                    </a>
                    <p class="in_name">商城导航</p>
                </div>
                <div class="col-xs-3" display="block">
                    <a href="#">
                    <span>
                    <img src="./assets/images/ic_pp.png" alt="品牌大全">
                    </span>
                    </a>
                    <p class="in_name">品牌大全</p>
                </div>
            </div>
        </div>
    </nav>
    <!--折扣推荐-->
    <section id="discount">
        <span class="fl">超值折扣推荐</span>
        <a href="">
            <img src="./assets/images/more.png" class="fr" alt="">
        </a>
    </section>
    <!--商品-->
    <section id="product">
        <ul class="info">
            <!-- <li>
                <a href="" class="clearfix">
                    <div class="img fl">
                        <img src="images/more.png" alt="">
                    </div>
                    <div class="infoR">
                        <div class="title">
                            <h4>正在加载...</h4>
                        </div>
                        <div class="other">
                            <span class="mall fl">京东商城 | 07-09 16:14</span>
                            <i class="iconfont icon-xiaoxi fr">3</i>
                        </div>

                    </div>
                </a>
            </li> -->

        </ul>
    </section>
    <!--底部-->
    <section id="footer">
        <div class="more">
            <a href="">
                更多优惠信息>>
            </a>
        </div>
        <div class="chart clearfix">
            <span class="chart_in fl">品牌排行</span>
            <span class="more fr">
                <img src="./assets/images/more.png" alt="">
            </span>
        </div>
        <div class="login">
            <div class="container">
                <div class="row">
                    <a href="">
                        <div class="col-xs-3">登入</div>
                    </a>
                    <a href="">
                        <div class="col-xs-4">注册</div>
                    </a>
                    <a href="">
                        <div class="col-xs-5">返回顶部</div>
                    </a>
                    <span></span>
                </div>
            </div>
            <div class="content_b">
                <p>
                    <a href="#">
                        手机APP下载
                    </a>
                    <a href="#">
                        万锋智慧商城手机版
                    </a>
                    -- 掌上比价平台
                </p>
                <p>
                    chst.vip:8081/crm </p>
            </div>
        </div>

        <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
        <script>
            let oul=document.querySelector(".info");
            // let odiv=document.querySelectorAll(".col-xs-3");
            // let titleArr=[];
            // let contentArr=[];
            const xhr=new XMLHttpRequest();
            xhr.open("get","http://chst.vip:1234/api/getmoneyctrl");
            xhr.send();
            xhr.onload=function(){
                let res=JSON.parse(xhr.responseText);
                // console.log(res.result[0]);
                let regExp=/(?<=imgurl=)[^'"]*/;
                let ele="";
                res.result.forEach(tiem=>{
                    // console.log(tiem);
                    var img=regExp.exec(tiem.productImg2)[0];
                    ele+=`<li productId="${tiem.productId}">
                            <a href="" class="clearfix">
                                <div class="img fl" >
                                    <img src="${img}" alt="">
                                </div>
                                <div class="infoR">
                                    <div class="title">
                                        <h4>${tiem.productName}
                                        <span>${tiem.productPinkage}</span>
                                        </h4>
                                    </div>
                                    <div class="other">
                                        <span class="mall fl">${tiem.productFrom}|${tiem.productTime}</span>
                                        <em class="fr">
                                        <i>|</i>
                                        <span>${tiem.productComCount}</span>
                                        </em>
                                    </div>

                                </div>
                            </a>
                        </li>`
                });
                oul.innerHTML=ele;
            }
            
            $(".col-xs-3:eq(7)").click(function(){
            $("[display='block']").slideToggle(100,"linear",function(){
            })
                 
        })
                
                        
        </script>
    </section>
</body>
</html>